import ListItem from '@/components/ListItem/ListItem';
import React from 'react';
import { useHistory } from 'umi';
import type { History } from 'umi';
import './List.less';

export default function List() {
  const listArr = [1, 2, 3, 4, 5];
  const history: History = useHistory();
  const handleClick = ({ type, data }: { type: any; data: any }) => {
    console.log(type, data);
    if (type === 'edit') {
      // history.push({ pathname: '/pasture-edit', state: data });
      // 使用query跳转的时候需要注意两个问题，第一个是 query不能太长  第二个是query里的数据，需要是字符串,一定要注意，不能放对象
      history.push({ pathname: '/pasture-edit', query: { id: data.id } });
    }
  };
  return (
    <div className="my-content-wrapper">
      <div className="pasture-wrapper">
        {listArr.map((item) => (
          <div className="content-item" key={item}>
            <ListItem data={{ id: item + '' }} handleClick={handleClick} />
          </div>
        ))}
      </div>
    </div>
  );
}
